<template>
    <div class="container">
        <div class="body_wrap">
            <el-card shadow="hover" ref="content_card">
                <el-tabs v-model="active" @tab-click="handleClick" >
                    <el-tab-pane
                        v-for="(item, index) in tabs"
                        :key="index"
                        :label="`${item.label}`"
                        :name="item.name"
                    >
                        <component v-if="item.show" :is="item.component" :params="item.params"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
import LogLogin from "./log_login.vue";
import LogOperate from "./log_operate.vue";
import LoginReport from "./log_report.vue";
export default {
    name: "tabs",
    components: {
        LogLogin,
        LogOperate,
        LoginReport
    },
    data() {
        return {
            active: "login",
            tabs: [
                {
                    label: "登录日志",
                    name: "login",
                    show: true,
                    component: LogLogin,
                    params: {type: 1}
                },
                {
                    label: "操作日志",
                    name: "operation",
                    show: false,
                    component: LogOperate,
                    params: {type: 2}
                },
                {
                    label: "图表",
                    name: "report",
                    show: false,
                    component: LoginReport,
                    params: {type: 3}
                }
            ]
        };
    },

    created() {
    },

    methods: {
        handleClick(tab) {
            /**
             * 每次换tab的时候，子组件的mounted()函数都会被触发4次。
             * 这是因为每次我们按tab的时候，都有4个子组件被渲染。
             * 所以我们要用v-if来选择渲染的组件。
             */
            this.tabs.forEach(item =>
                item.name === tab.name
                    ? (item.show = true)
                    : (item.show = false)
            );
        }
    }
};
</script>

<style lang="scss" scoped></style>
